<?php 
require_once '../common/common.inc.php';

conn();

$sqlLoc = "";
$sqlLoc .= "SELECT l.CODE, l.NAME ";
$sqlLoc .= "FROM COMPANIES c ";
$sqlLoc .= " INNER JOIN LOCATIONS l ON c.CODE = l.COMPANY_CODE ";
$sqlLoc .= "ORDER BY l.CODE ASC ";
$resultLoc = mysql_query($sqlLoc);
if (!$resultLoc) {die('Could not exec query: ' . mysql_error());}
$numRowsLoc = mysql_num_rows($resultLoc);

$sqlServ = "";
$sqlServ .= "SELECT CODE, NAME ";
$sqlServ .= "FROM SERVICES ";
$sqlServ .= "ORDER BY CODE ASC ";
$resultServ = mysql_query($sqlServ);
if (!$resultServ) {die('Could not exec query: ' . mysql_error());}
$numRowsServ = mysql_num_rows($resultServ);

close();


?>

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<script src="../js/jquery-1.5.1.min.js"></script>
<script src="../js/jquery-ui-1.8.12.custom.min.js"></script>
<script>

$(function(){

  load();
  
  $('#location').change(function(event){
    load();
    return false;
  });

})

function load() {
  var locationStr = $('#location').val();
  var serviceStr = $('#service').val();
  $.get('ajax_result_table.php', { location: locationStr, service: serviceStr }, function(data) {
    $('#result-table').html(data);
  });      
}

</script>
</head>
<body>

<table border="1">
  <tr>
    <td>location</td>
    <td><?php echo dropdown2($resultLoc, "location", "", "required") ?></td>
  </tr>
  <tr>
    <td>service</td>
    <td><?php echo dropdown2($resultServ, "service", "", "required") ?></td>
  </tr>
</table> 

<hr />

<div id="result-table"></div>

<hr />

<br /><br /><br /><br /><br /><br />

<input list="browsers" />

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist> 

</body>
</html> 